import React, { Component } from 'react';
import '../assets/css/home.scss';
import { Row, Col, Icon, Progress, Tabs } from 'antd';
import userImg from '../assets/img/head.png';
// import Circle from '../components/Circle';
const TabPane = Tabs.TabPane;

class Home extends Component {
    state = {
        dateStr: new Date().getHours() > 12 ? '下午好' : '上午好'
    }
    render() {
        return (
            <div>
                <div className="main-title main-padding">
                    <img src={userImg} alt=""/>
                    <div className="main-text">
                        <div className="main-text-t">{this.state.dateStr}，XXX</div>
                        <div className="main-text-b"><Icon type="shop"/>工作再忙也要记得喝水哦~</div>
                    </div>
                </div>

                <div className="main-chart">
                    <Row gutter={16}>
                        <Col span={4}>
                            <div className="t-class">
                                <h3>今日排课</h3>
                                <p>暂无排课</p>
                            </div>
                        </Col>
                        <Col span={20}>
                            <Row gutter={16}>
                                <Col span={16}>
                                    <div className="t-data">
                                        <h3>今日课务数据</h3>
                                        <div className="chart-box">
                                            <div className="user-chart">
                                                <div>
                                                    <Progress type="circle" percent={75} format={percent => `总人次`} />
                                                </div>
                                                <ul>
                                                    <li>已签到：0</li>
                                                    <li>已请假：0</li>
                                                    <li>已课评：0</li>
                                                </ul>
                                            </div>
                                            <div className="class-chart">
                                                <div>
                                                    <Progress type="circle" percent={75} format={percent => `课节完成情况`} />
                                                </div>
                                            </div>
                                            <div className="teacher-chart">
                                                <div>
                                                    <Progress type="circle" percent={75} format={percent => `有课老师`} />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </Col>
                                <Col span={8}>
                                    <div className="class-data">
                                        <h3>班级待办</h3>
                                        <Tabs defaultActiveKey="1" animated={false}>
                                            <TabPane tab="待排课班级" key="1">
                                                <Icon type="appstore-o"></Icon>所有班级已经排课
                                            </TabPane>
                                            <TabPane tab="待完结班级" key="2">
                                                <Icon type="schedule"></Icon>无需完结班级
                                            </TabPane>
                                        </Tabs>
                                    </div>
                                </Col>
                                <Col span={24} style={{marginTop: 10}}>
                             
                                    <div className="class-data">
                                        <h3>学员待办</h3>
                                        <Tabs defaultActiveKey="1" animated={false}>
                                            <TabPane tab="待处理请假" key="1">
                                                <Icon type="book"></Icon>所有请假申请都已经被处理
                                            </TabPane>
                                            <TabPane tab="合约到期学员" key="2">
                                                <Icon type="solution"></Icon>7天内无学员合约到期
                                            </TabPane>
                                            <TabPane tab="课时不足学员" key="3">
                                                <Icon type="credit-card"></Icon>无剩余课时小于2的学员
                                            </TabPane>
                                            <TabPane tab="未签约学员" key="4">
                                                <Icon type="file-unknown"></Icon>所有学员都已签约
                                            </TabPane>
                                            <TabPane tab="未绑定微信学员" key="5">
                                                <Icon type="wechat"></Icon>所有学员都已绑定微信
                                            </TabPane>
                                        </Tabs>
                                    </div>  
                            </Col>
                            </Row>
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }
}
export default Home;
